<!DOCTYPE html>
<html lang="zh">

<head>
  <meta charset="utf-8" />
  <title>React App</title>

  <link rel="stylesheet" href="index.css" />
</head>

<body>
  <div id="root">
    <div class="todo-container">
      <div class="todo-wrap">
        <div class="todo-header">
          <input type="text" placeholder="请输入你的任务名称，按回车键确认" />
        </div>
        <h3 class="todo-none">欧呦！竟然没有任务了……</h3>
        <ul class="todo-main">
          <!-- <li>
              <label>
                <input type="checkbox" id=""/>
                <span>xxxxx</span>
              </label>
              <button class="btn btn-danger">
                删除
              </button>
            </li> -->
        </ul>
        <div class="todo-footer">
          <!-- <label>
            <input type="checkbox" />
          </label>
          <span>
            <span>已完成 <i id="doneNum">0</i></span> / 全部
            <i id="totalNum">0</i>
          </span>
          <button class="btn btn-danger">清除已完成任务</button> -->
        </div>
      </div>
    </div>
  </div>
  <!-- <script src="./function/clearChecked.js"></script>
  <script src="./function/isCheckAll.js"></script>
  <script src="./function/obj2str.js"></script>
  <script src="./function/ajaxPost.js"></script>
  <script src="./index.js"></script> -->

  <script>
    const oTodo_header_input = document.querySelector(".todo-header input");
    const oTodo_none = document.querySelector(".todo-none");
    const oTodo_main = document.querySelector(".todo-main");
    const oTodo_footer = document.querySelector(".todo-footer");




    //把对象转成"键=值&键=值"类型的字符串的函数
    function obj2str(obj) {
      if (!obj) return;
      let arr = [];
      for (let key in obj) {
        arr.push(`${key}=${obj[key]}`);
      }
      return arr.join("&");
    }


    //发送ajax请求的函数(post)
    function ajaxPost(options) {
      return new Promise((resolve, request) => {
        //把传入的参数进行解构
        const { url, data } = options;
        const xhr = new XMLHttpRequest();
        xhr.open("post", url);
        xhr.setRequestHeader("content-type", "application/x-www-form-urlencoded");
        //调用对象转字符串的方法
        const params = obj2str(data);
        xhr.send(params);
        xhr.onreadystatechange = function () {
          if (xhr.readyState === 4 && xhr.status === 200) {
            //如果请求成功了，后台会自动返回数据库里所有的数据回来，但是因为返回的是JSON格式的字符串，所有要转成js对象
            resolve(JSON.parse(xhr.responseText));
          }
        }
      });
    }



    //动态渲染数据的函数
    function render(dataStr) {
      //数据拿到了之后就去进行渲染页面
      //先判断数据有没有内容，如果没有内容那么就要控制页面的显示效果，因为传进来的是一个数组，所以要用长度去判断有没有内容
      if (dataStr.length === 0) {
        //控制显示效果
        oTodo_none.style.display = "block";
        oTodo_main.style.display = "none";
        oTodo_footer.style.display = "none";
        //没有数据不用执行后面的代码
        return;
      } else {
        //控制显示效果
        oTodo_none.style.display = "none";
        oTodo_main.style.display = "block";
        oTodo_footer.style.display = "block";

        let num = 0;
        //把传进来的数组用reduce方法把里面的每一条数据拼接上字符窜
        const todoItemsArr = dataStr.reduce((preArr, item) => {
          if (item.isDone === "true") num++;
          const mainStr = `<li>
              <label>
                <input type="checkbox" id="${item._id}" ${item.isDone === "true" ? "checked" : ""}/>
                <span>${item.todoItem}</span>
              </label>
              <button class="btn btn-danger">
                删除
              </button>
            </li>`;
          preArr.push(mainStr);
          return preArr;
        }, []);
        // console.log(todoItemsArr);
        const footerStr = `<label>
            <input type="checkbox" ${dataStr.length === num ? "checked" : ""}/>
          </label>
          <span>
            <span>已完成 <i id="doneNum">${num}</i></span> / 全部
            <i id="totalNum">${dataStr.length}</i>
          </span>
          <button class="btn btn-danger">清除已完成任务</button>`;

        //得到了要渲染的数据之后先它转为字符串,并加入到main和footer中
        oTodo_main.innerHTML = todoItemsArr.join("");
        oTodo_footer.innerHTML = footerStr;



        //点击footer下面的选框的事件
        const oTodo_footer_input = document.querySelector(".todo-footer input");
        oTodo_footer_input.onclick = async function () {
          //获取到所有的main里的input标签
          const oTodo_main_inputs = document.querySelectorAll(".todo-main li input");
          const inputsArr = Array.from(oTodo_main_inputs);
          const inputsIdArr = inputsArr.map((item) => { return item.id });
          //调用发送ajax请求去更改数据
          const todoList = await ajaxPost({ url: "http://127.0.0.1:5000/update", data: { ids: JSON.stringify(inputsIdArr), isDone: this.checked } });
          render(todoList);
        }


        const oTodo_footer_button = document.querySelector(".todo-footer button");
        oTodo_footer_button.onclick = async function () {
          //一点击就获取到所有的已经选中了的input标签
          const oTodo_main_inputs = document.querySelectorAll(".todo-main li input[checked]");
          const inputArr = Array.from(oTodo_main_inputs);
          const idArr = inputArr.reduce((preArr, item) => {
            preArr.push(item.id);
            return preArr;
          }, []);
          //然后发送删除的ajax请求
          const todoList = await ajaxPost({ url: "http://127.0.0.1:5000/delete", data: { ids: JSON.stringify(idArr) } });
          render(todoList);
        }

      }
    }



    //先获取到数据库里的所有数据，把它渲染到页面中，使用jsonp去请求跨域
    const script = document.createElement("script");
    script.src = "http://127.0.0.1:5000/findAll?callback=render";
    document.body.appendChild(script);



    //点击enter按钮增加数据
    oTodo_header_input.onkeyup = async function (e) {
      if (e.keyCode === 13) {
        //先获取到输入框的数据
        const value = this.value.trim();
        this.value = "";
        if (!value) return;
        //发送增加数据的ajax请求
        const todoList = await ajaxPost({ url: "http://127.0.0.1:5000/create", data: { todoItem: value } });
        render(todoList);
      }
    }



    //给main添加点击事件，实际是要点击input或删除按钮
    oTodo_main.onclick = async function (e) {
      if (e.target.nodeName.toLowerCase() === "input") {
        //通过点击input的checked的状态动态的去改变数据库的数据,把id属性的值传进去，发送ajax请求
        const todoList = await ajaxPost({ url: "http://127.0.0.1:5000/update", data: { ids: JSON.stringify([e.target.id]), isDone: e.target.checked } });
        render(todoList);
      }
    }



    //点击main的删除按钮删除对应的数据
    oTodo_main.addEventListener("click", async (e) => {
      if (e.target.nodeName.toLowerCase() === "button") {
        const oInput = e.target.parentNode.querySelector("input");
        //发送删除的ajax请求
        const todoList = await ajaxPost({ url: "http://127.0.0.1:5000/delete", data: { ids: JSON.stringify([oInput.id]) } });
        render(todoList);
      }
    });





  </script>
</body>

</html>